<template>
  <view class="bg-gray" style="min-height: 100vh">
    <cu-custom :bgColor="'bg-' + theme.backgroundColor" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content"> {{ flag == 1 ? "扫码" : "我的" }}</block>
    </cu-custom>
    <view class="">
      <view class="code" v-if="flag == 1">
        <view class="top-img">
          <image src="../../static/code-step.png" mode="widthFix" />
        </view>
        <view class="sao" @tap="scanCode">
          <image src="../../static/sao.png" mode="widthFix" />
        </view>
      </view>
      <view class="user" v-if="flag == 2">
        <view class="bg" :class="'bg-' + theme.backgroundColor"> </view>
        <view class="content">
          <view class="top">
            <view class="headimgUrl">
              <image :src="userInfo.headimgUrl" mode="" />
            </view>
            <view class="name">{{ userInfo.nickName }}</view>
          </view>
          <view class="info">
            <view class="row">
              <text>账号</text>
              <text>{{ userInfo.phone }}</text>
            </view>
            <view class="row">
              <text>姓名</text>
              <text>{{ userInfo.nickName }}</text>
            </view>
            <view class="row">
              <text>医院</text>
              <text>{{ userInfo.nickName }}</text>
            </view>
          </view>
          <view class="info" v-if="userObj.id">
            <view class="title" @tap="more">
              <text class="f30">上传记录</text>
              <text class="text-gray">
                <text>查看更多</text>
                <text class="cuIcon-right"></text>
              </text>
            </view>
            <view class="m-all32 p-all32">
              <view class="pb32">
                <text class="f28">处方号:{{ userObj.id }}</text>
              </view>
              <view class="user-bg">
                <view class="text-gray">
                  <text>患者姓名:{{ userObj.userName }}</text>
                </view>
                <view class="mt20 text-gray">
                  <text>性别:{{ userObj.sex == 1 ? "男" : "女" }}</text>
                </view>
                <view class="mt20 text-gray">
                  <text
                    >科室:{{
                      userObj.department ? userObj.department : ""
                    }}</text
                  >
                </view>
              </view>
              <view class="details-box">
                <view class="details" @tap="goDetails" :class="'bg-' + theme.backgroundColor">
                查看详情
              </view>
              </view>
        
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="tabbar">
      <view class="code flex" @tap.stop="flag = 1">
        <view class="img-box">
          <image
            v-if="flag == '1'"
            src="../../static/code-active.png"
            mode=""
          ></image>
          <image v-else src="../../static/code.png" mode=""></image>
        </view>
        <text :class="flag == 1 ? 'active' : ''">扫码</text>
      </view>
      <view class="user flex" @tap.stop="flag = 2">
        <view class="img-box">
          <image
            v-if="flag == '2'"
            src="../../static/user-active.png"
            mode=""
          ></image>
          <image v-else src="../../static/user.png" mode=""></image>
        </view>
        <text :class="flag == 2 ? 'active' : ''">我的</text>
      </view>
    </view>
  </view>
</template>

<script>
const app = getApp();
import api from "utils/api";
export default {
  data() {
    return {
      userObj: {},
      flag: "1",
      page: {
        size: 1,
        current: 1,
      },
      theme: app.globalData.theme, //全局颜色变量
      userInfo: uni.getStorageSync("user_info"),
    };
  },
  onLoad(options) {
    this.getList();
  },
  methods: {
    more() {
      this.$goUrl("/pages_code/pages/list/index");
    },
    getList() {
      api.qrcodePage(this.page).then((res) => {
        this.userObj = res.data.records[0] || {};
      });
    },
    goDetails(item){
        uni.setStorageSync("hospitalObj", this.userObj);
        this.$goUrl("/pages_code/pages/details/index");
    },
    scanCode() {
      let that = this;
      wx.scanCode({
        scanType: ["qrCode"],
        success: function (res) {
          console.log(res);
          api
            .getQrCodeContent({
              qrCodeMd5: res.result,
            })
            .then((data) => {
              let dataList = data.data.split(/\&/g);
              let [hospital, yaoList] = dataList;
              hospital = hospital.split(/\|/g);
              let hospitalObj = {
                presNo: hospital[0],
                hospitalId: hospital[1],
                hospitalName: hospital[2],
                userName: hospital[3],
                sex: hospital[4],
                department: hospital[5],
                dosage: hospital[6],
                diagnosis: hospital[7],
                amount: hospital[8],
                medicalInsurance: hospital[9],
                patientNo: hospital[10],
                days: hospital[11],
                presType: hospital[12],
                medicinePrice: hospital[13],
                isDj: hospital[14],
                deliveryWay: hospital[15],
                receiverName: hospital[16],
                receiverPhone: hospital[17],
                receiverAddress: hospital[18],
                remark: hospital[19],
                drugChineseList: [],
              };

              yaoList = yaoList.split(/\|/g);
              yaoList.pop();
              let arr = that.chunkArray(yaoList, 6);
              let drugChineseList = [];
              arr.forEach((el) => {
                let obj = {
                  index: el[0],
                  spuCode: el[1],
                  medicineName: el[2],
                  qty: el[3],
                  unit: el[4],
                  memo: el[5],
                };
                drugChineseList.push(obj);
              });
              hospitalObj.drugChineseList = drugChineseList;
              uni.setStorageSync("hospitalObj", hospitalObj);
              that.$goUrl("/pages_code/pages/upload/index");
            });
        },
        complete: function () {
          uni.hideLoading();
        },
        fail: function (err) {
          console.error("scanCode", err);
        },
      });
    },
    chunkArray(arr, size) {
      return arr.reduce((acc, el, i) => {
        if (i === 0 || i % size === 0) {
          acc.push([]);
        }
        acc[acc.length - 1].push(el);
        return acc;
      }, []);
    },
  },
};
</script>

<style lang="scss" scoped>
.code {
  .top-img {
    width: 100%;
    image {
      width: 100%;
      height: 100%;
    }
  }
}
.sao {
  width: 370rpx;
  height: 370rpx;
  margin: 200rpx auto 0;
  image {
    width: 100%;
    height: 100%;
  }
}
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0rpx 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .code {
    align-items: center;
    padding: 32rpx 20rpx;
  }
  .user {
    align-items: center;
    padding: 32rpx 20rpx;
  }
  .active {
    color: #406cff;
  }
  .img-box {
    width: 32rpx;
    height: 32rpx;
    margin-right: 20rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
}
.user {
  .bg {
    width: 100%;
    height: 30vh;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
  }
  .content {
    position: absolute;
    top: 200rpx;
    left: 0rpx;
    right: 0rpx;
    z-index: 2;
    padding: 32rpx;
  }
  .top {
    display: flex;
    align-items: center;
    margin-bottom: 48rpx;
    .name {
      margin-left: 32rpx;
      font-size: 34rpx;
      font-weight: 600;
      color: #fff;
    }
    .headimgUrl {
      width: 96rpx;
      height: 96rpx;
      border-radius: 50%;
      image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
  }
  .info {
    background-color: #fff;
    margin: 32rpx 0;
    border-radius: 16rpx;
    width: 100%;
    padding: 32rpx;
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .row {
      &:last-child {
        border: none;
      }
      padding: 32rpx;
      border-bottom: 2rpx solid #eaeeef;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}
.user-bg {
  background: #f8faff;
  padding: 16rpx;
}
.details-box{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.details{
  display: inline-block;
  padding: 20rpx 32rpx;
  border-radius: 80rpx;
  color: #fff;
  margin-top: 44rpx;
  
}
</style>
